<template>
  <div class="grouping">

    <div class="tit">
      <span class="goback" style="font-size: .2rem;font-weight: 700;">专家鉴定</span>
      <span style="font-size: .2rem;margin:0 .1rem;">></span>
      <span style="font-size: .2rem;font-weight: 700;">{{ card }}号</span>

      <div style="position: absolute;right: .2rem;">
        <el-button @click="goback" size="small">返回</el-button>
      </div>
    </div>

    <div class="box clearfix">
      <div class="smallbox" v-for="(item, index) in imglist" @click="goauthenticate(item, index)">
        <div>
          <div v-for="im in reverse(item.pathList)"><img :src="im + '?x-amz-process=image/resize,h_100,m_lfit'" alt=""></div>
          <span
            style="position: absolute;top: 0;right: .2rem;top: .2rem;display: inline-block;line-height: .2rem;border-radius: 2px;background-color: red;color: #ffffff"
            v-for="dn in item.discernName.split('#')">{{ dn }}</span>
          <div class="txt">
            <span>{{ item.number }}</span>
            &nbsp;
            <span class="el-icon-picture"></span>
            <span class="isok" :style="item.status == 0 ? 'background-color: red;' : 'background-color: #00CC46;'">
              {{ item.status == 0 ? '未鉴定' : '已鉴定' }}
            </span>
          </div>
        </div>
        <div>
          <span>组编号：{{ item.groupNum }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from '../utils/http'
import api from '../utils/api'

export default {
  data() {
    return {
      id: "",
      imglist: [],
      card: 0
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.card = this.$route.query.card;
    this.getdata();
  },
  mounted() {
  },
  methods: {
    goback() {
      // this.$router.push('/Photo/PhotoIdentification')
      this.$router.push('/Photo/PhotoIdentification')
    },
    reverse(t) {
      var a = [];
      t.forEach(e => {
        a.unshift(e)
      })
      return a;
    },
    getdata() {
      var vm = this;
      (async function () {
        let res = await http.get(api.infrared.getCameraGroups, {
          cameraEnvirId: vm.id
        })
        if (res.data.message == '成功') {
          var a = res.data.data;
          for (var i = 0; i < a.length; i++) {
            for (var k = 0; k < 3; k++) {
              if (a[i].pathList[k] == undefined) {
                a[i].pathList[k] = '../../static/images/huitu.jpg'
              }
            }
          }
          vm.imglist = a;
        }
      })()
    },
    goauthenticate(d, index) {
      this.$router.push({
        path: "/Photo/PhotoIdentification/authenticate",
        query: {
          id: this.id,
          groupId: d.groupId,
          card: this.card,
          allnum: this.imglist.length,
          groupNumber: d.groupNum,
          index: index + 1,
          pageNum: this.$route.query.pageNum
        }
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.name === 'PhotoIdentification') {
      to.meta.keepAlive = true
    }
    next()
  }
}

</script>
<style scoped>
@import "../../static/css/grouping.css";
</style>
